<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: "Vue2MapboxFirstmapboxMap",
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      const map = new mapboxgl.Map({
        container: "map",
        // style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z",
        center: [118.79013542048335, 32.05775855185749], 
        // projection: "mercator",
        zoom: 3
      });
      map.setStyle("mapbox://styles/mapbox/streets-v11");

      // 基础点击事件
      map.on("click", (evt) => {
        console.log(evt.lngLat);
      });
      // 定义地图的最大边界和最小边界
      var bounds = [
        [118.16, 30.45], // 左下角的经纬度坐标
        [121.06, 34.32]  // 右上角的经纬度坐标
      ];

      // 设置地图的最大边界
      map.setMaxBounds(bounds);

      // 禁止用户拖动地图
      // map.dragPan.disable();

      map.on('load', ()=>{
        // map.setStyle('mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z');
        // map.addSource('geoserver-wms', {
        //     'type': 'raster',
        //     'tiles': [
        //         'http://192.168.43.72:8080/geoserver/test/wms?service=WMS&version=1.1.0&request=GetMap&layers=test%3Ariver1_line4326&bbox=73.442794%2C18.006141%2C134.992799%2C53.564473&width=768&height=443&srs=EPSG%3A4326&styles='
        //     ],
        //     'tileSize': 256
        // });

        // map.addLayer({
        //     'id': 'geoserver-wms-layer',
        //     'type': 'raster',
        //     'source': 'geoserver-wms',
        //     'paint': {}
        // });

      })

      map.on('zoomend', ()=>{
        // 获取当前地图的缩放级别
        var zoom = map.getZoom();

        // 获取屏幕的像素比例
        var pixelRatio = window.devicePixelRatio;

        // 估算地图的分辨率
        var resolution = 156543.03392 * Math.cos((map.getCenter().lat * Math.PI) / 180) / Math.pow(2, zoom) / pixelRatio;

        console.log('当前地图分辨率:', resolution);
      })
    },
  },
};
</script>

<style ></style>
